<script setup>
import { computed } from "vue";
import { data } from "@/config/config";

const indexBar = computed(() => data.indexBar);

const addClass = function (e) {
  //查找所有元素，删除e-hoveradd类 contains
  let list = document.querySelectorAll('.ee');
  list.forEach((element) => {
    if (element.classList.contains('e-hoveradd')) {
      element.classList.remove('e-hoveradd');
    }
  });
  // 为点击元素添加e-hoveradd类
  if (e == '平台动态') {
    list[0].classList.add('e-hoveradd');
  } else if (e == '政策法规') {
    list[1].classList.add('e-hoveradd');
  } else if (e == '违规投诉') {
    list[2].classList.add('e-hoveradd');
  }


};
const moveHover = function () {
  let list = document.querySelectorAll('.ee');
  list.forEach((element) => {
    if (element.classList.contains('e-hoveradd')) {
      element.classList.remove('e-hoveradd');
    }
  });
}
</script>
<template>
  <el-row :gutter="0" justify=center class="flex shadowing">
    <el-col :span="6">
      <div class="grid-content ep-bg-purple">
        <div class="flex">
          <RouterLink to="/">
            <img src="../img/主页/u128.png" alt="" style="cursor: pointer;" @click="moveHover">
          </RouterLink>
          <h1 class="floatt"><a href>{{ indexBar.left.txt }}</a></h1>
        </div>
      </div>
    </el-col>
    <el-col :span="3" class="e-hover">
      <RouterLink :to=indexBar.name[0]>
        <div class=" grid-content ep-bg-purple ee" @click="addClass(indexBar.middle[0])">
          {{ indexBar.middle[0] }}
        </div>
      </RouterLink>
    </el-col>
    <el-col :span="3" class="e-hover">
      <RouterLink :to=indexBar.name[1]>
        <div class=" grid-content ep-bg-purple ee" @click="addClass(indexBar.middle[1])">
          {{ indexBar.middle[1] }}
        </div>
      </RouterLink>
    </el-col>
    <el-col :span="3" class="e-hover">
      <RouterLink :to=indexBar.name[2]>
        <div class=" grid-content ep-bg-purple ee" @click="addClass(indexBar.middle[2])">
          {{ indexBar.middle[2] }}
        </div>
      </RouterLink>
    </el-col>
    <el-col :span="4">

    </el-col>
    <el-col :span="5">
      <RouterLink :to=indexBar.name[4]>
        <div class="grid-content ep-bg-purple">
          <img src="../img/主页/u122.png" alt="" style="margin-right: 10px;" @click="moveHover">{{ indexBar.right.txt }}
        </div>
      </RouterLink>
    </el-col>
  </el-row>
</template>
<style>
.shadowing {
  box-shadow: 0 5px 5px #ddd;
}

.floatt {
  min-width: 150px;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}

img {
  width: 35px;
}

a {
  text-decoration: none
}

.ee {
  width: 100%;
  height: 100%;
}

.el-row {
  min-width: 600px;
  font-size: 18px;
  height: 50px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.e-hoveradd {
  border-bottom: 2px solid #13b69f;
  color: #13b69f;
  /* transition: all .1s; */
}



.grid-content {
  min-height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0;
}
</style>
